import 'package:flutter/material.dart';

class NumberKeyboard extends StatefulWidget {
  final ValueChanged<String> onConfirm;
  final ValueChanged<String> onInput;

  const NumberKeyboard({
    super.key,
    required this.onConfirm,
    required this.onInput,
  });

  @override
  State<NumberKeyboard> createState() => _NumberKeyboardState();
}

class _NumberKeyboardState extends State<NumberKeyboard> {
  String _inputValue = '';

  void _onKeyTap(String key) {
    if (key == '⌫') {
      if (_inputValue.isNotEmpty) {
        setState(() {
          _inputValue = _inputValue.substring(0, _inputValue.length - 1);
        });
      }
    } else if (key == '.') {
      if (!_inputValue.contains('.')) {
        if (_inputValue.isEmpty) {
          _inputValue = '0.';
        } else {
          setState(() {
            _inputValue += key;
          });
        }
      }
    } else if (key == '确认') {
      widget.onConfirm(_inputValue);
    } else {
      setState(() {
        _inputValue += key;
      });
    }
    widget.onInput(_inputValue);
  }

  @override
  Widget build(BuildContext context) {
    final List<List<String>> keys = [
      ['100', '200', '300',''],
      ['1', '2', '3','⌫'],
      ['4', '5', '6','确认'],
      ['7', '8', '9','确认'],
      ['0', '0', '⌫','认'],
    ];

    return Column(
      children: keys.map((row) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: row.map((key) {
            return Expanded(
              child: Material(
                color: Colors.white,
                child: InkWell(
                  onTap: () => _onKeyTap(key),
                  splashColor: Colors.grey[300],
                  highlightColor: Colors.grey[200],
                  child: Container(
                    padding: const EdgeInsets.all(16),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border(
                        right: BorderSide(
                          color: Colors.grey[300]!,
                          width: 0.5,
                        ),
                        bottom: BorderSide(
                          color: Colors.grey[300]!,
                          width: 0.5,
                        ),
                      ),
                    ),
                    child: Text(
                      key,
                      style: TextStyle(
                        fontSize: key == '确认' ? 16 : 20,
                        fontWeight: key == '确认' ? FontWeight.bold : FontWeight.normal,
                      ),
                    ),
                  ),
                ),
              ),
            );
          }).toList(),
        );
      }).toList(),
    );
  }
}